<template>
  <section class="app-container calendar-list-container">
    <section class="container-header">
      <p class="header-title">{{ infoList.questionnaire_title }}</p>
      <p class="header-content">{{ infoList.questionnaire_desc }}</p>
    </section>
    <section class="container-table">
      <section class="table-header">
        <el-row type="flex" justify="space-between" align="middle">
          <div>
            <span>合计:{{ infoList.user_nums || 0 }}人填写</span>
            <span>平均浏览时长:{{ infoList.answer_avgtime || 0 }}分钟</span>
          </div>
          <div style="text-align:right">
            <el-button type="primary">导出</el-button>
          </div>
        </el-row>
      </section>
      <section class="table-box">
        <el-table border :data="tableList" v-loading="loading" element-loading-text="正在查询中。。。" stripe highlight-current-row>
          <el-table-column label="问题" prop="questionnaire_title">
          </el-table-column>
          <el-table-column label="选项" prop="answer">
          </el-table-column>
          <el-table-column label="填写人" prop="user_name">
          </el-table-column>
          <el-table-column label="手机号" prop="phone">
          </el-table-column>
          <el-table-column label="浏览时长（分钟）" prop="answer_time">
          </el-table-column>
          <el-table-column label="填写时间" prop="create_time">
          </el-table-column>
        </el-table>
      </section>
      <!-- 分页 -->
      <section>
        <so-pagination :query="listQuery" @initList="initList" />
      </section>
    </section>
  </section>
</template>

<script>
import { questionnaire_fullDataStatisticsById } from "@/api/questionnaire";
import SoPagination from "@/components/SoPagination";

export default {
  name: "detailed",
  components: { SoPagination },
  data() {
    return {
      loading: false,
      listQuery: { start: 0, limit: 10, total: 0, current: 1 },
      tableList: [],
      infoList: {}
    };
  },
  methods: {
    //获取数据
    async initList() {
      this.loading = true;
      const query = {
        ...this.listQuery,
        id: this.$route.query.id,
        company_id: localStorage.getItem("companyId") - 0
      };
      const { data } = await questionnaire_fullDataStatisticsById(query);
      this.loading = false;
      if (data.status == 100) {
        this.infoList = data.data;
        this.tableList = data.data.questionnaireAnss;
        this.listQuery.total = data.data.questionnaireAnss.length;
      }
    }
  },
  created() {
    this.initList();
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.container-header {
  background-color: #fff;
  padding: 40px;
  margin-bottom: 10px;
  .header-title {
    font-size: 24px;
  }
  .header-content {
    font-size: 18px;
    padding-top: 40px;
  }
}
.container-table {
  background-color: #fff;
  padding: 20px 40px;
  .table-box {
    padding: 20px 0;
  }
  .table-header {
    span {
      padding-right: 30px;
    }
  }
}
</style>
